<template>
  <div class="ruifox-image-upload">
    <el-dialog v-model="showDialog" :append-to-body="isAppendToBody" @close="handleClose" title="图片上传" width="960px" class="axupimg-box">
      <div class="inner-axupimg-box">
        <div class="axupimg-upload-box">
          <div class="local-upload">
            <div style="display: inline-flex; margin-left: 10px">
              <el-button type="primary" style="margin-bottom: 10px" @click="uploadClick">本地上传</el-button>
              <el-button @click="handleMaterial">从资源库选择</el-button>
              <el-button @click="handleInt">添加网络文件</el-button>
            </div>
            <el-upload
              ref="uploadRef"
              v-model:file-list="imgUploadList"
              class="upload-demo"
              action=""
              multiple
              :before-upload="handleBeforeUpload"
              :http-request="handleUpload"
              :on-change="handleChangeFiles"
              :show-file-list="false"
              :accept="allow"
              :limit="limit - imgUploadList.length"
              :on-exceed="handleExceed"
              drag
            >
              <template #default>
                <div class="local-upload-list-out">
                  <el-scrollbar height="400px" v-show="imgUploadList.length > 0">
                    <draggable :list="imgUploadList" animation="180" item-key="uid" :force-fallback="true" class="local-upload-list">
                      <template #item="{ element }">
                        <div>
                          <li>
                            <div class="img-box">
                              <img :src="element.url" alt="" />
                            </div>
                            <div class="progress-box" v-show="element.percentage !== 100">
                              <el-progress :percentage="element.percentage" :status="element.status === 'success' ? 'success' : ''" :stroke-width="20" />
                            </div>
                            <div class="online-image-edit" title="在线编辑" @click.stop="onlineImageEdit(element)">
                              <i class="iconfont">&#xe65d;</i>
                            </div>
                            <div class="remove-upload" title="删除" @click.stop="removeUpload(element.uid)">
                              <el-icon>
                                <Delete />
                              </el-icon>
                            </div>
                          </li>
                          <p class="img-name">{{ element.oriName ? element.oriName : element.name ? element.name : '网络图片' + element.uid }}</p>
                        </div>
                      </template>
                    </draggable>
                  </el-scrollbar>
                  <div class="no-upload-list" v-show="imgUploadList.length === 0">
                    <p>
                      <i class="iconfont" style="font-size: 48px; margin-bottom: 10px">&#xe65c;</i>
                      <br />
                      暂未上传图片，请点击“本地上传”或拖拽图片到当前区域进行上传
                    </p>
                  </div>
                </div>
              </template>
            </el-upload>
          </div>
          <el-dialog v-model="materialShow" width="960px" title="从资源库选择" align-center @close="handleMaterialClose" style="flex: none">
            <div class="online-upload">
              <div class="material-choose-box" @click.stop="changeLibrary">
                <div class="btn" :class="{ 'is-active': materialQuery.path === 'public' }" path="public">公共库</div>
                <div class="btn" :class="{ 'is-active': materialQuery.path === 'content' }" path="content">内容库</div>
                <div class="btn" :class="{ 'is-active': materialQuery.path === 'template' }" path="template">模板库</div>
              </div>
              <div class="online-upload-list-outer">
                <div class="online-upload-list">
                  <div class="online-upload-item" :class="{ 'is-choose': choseImagesList.find(a => a.id === item.id) }" v-for="item in materialImages" :key="item.id" @click="toggleChooseOnline(item)">
                    <img :src="item.url" alt="" />
                    <div class="upload-item-checkbox">
                      <el-icon>
                        <Check />
                      </el-icon>
                    </div>
                  </div>
                </div>
                <div class="pagination-view">
                  <el-pagination
                    small
                    background
                    :currentPage="materialQuery.currentPage"
                    :page-size="materialQuery.pageSize"
                    layout="prev, pager, next"
                    :total="materialQuery.total"
                    @update:current-page="handleMaterialCurrentChange"
                  />
                </div>
              </div>
              <div class="chose-img">
                <div class="chose-img-title">
                  <p>从资源库中选择图片</p>
                  <p>
                    已选：
                    <span>{{ choseImagesList.length }}</span>
                    张
                  </p>
                </div>
                <div class="material-chose-list">
                  <div style="height: 120px">
                    <el-scrollbar height="120px">
                      <div class="inner-material-chose-list">
                        <li class="material-chose-list-item" v-for="(item, index) in choseImagesList" :key="item.id">
                          <img :src="item.url" alt="" />
                          <div class="remove-btn" @click.stop="removeChose(index)">
                            <el-icon>
                              <Delete />
                            </el-icon>
                          </div>
                        </li>
                      </div>
                    </el-scrollbar>
                  </div>
                </div>
              </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="addMaterialImg">确认</el-button>
                <el-button @click="materialShow = false">取消</el-button>
              </span>
            </template>
          </el-dialog>
          <el-dialog v-model="interShow" width="960px" title="添加网络图片" @close="handleInterClose" align-center>
            <div class="inter-upload">
              <p class="inter-upload-tips">网络图片可能受到版权保护，使用未经授权的他人作品存在侵权行为，请慎重添加：</p>
              <el-input v-model="interUrls" :rows="4" type="textarea" placeholder="填写网络链接地址，若有多个链接，请用“回车”键进行换行" />
              <el-button type="primary" :disabled="interUrls === ''" style="margin-top: 10px" @click="handleAddInterImg">添加</el-button>
              <el-button style="margin-top: 10px" @click="handleClearInter">清空</el-button>
              <div class="inter-upload-list" v-if="interImages.length > 0">
                <div class="inter-upload-list-title">
                  <p class="title-left">图片列表</p>
                  <p class="title-right">
                    已添加:
                    <span class="primary-num">{{ interImagesChecked.length }}</span>
                    /
                    <span>{{ limit - imgUploadList.length }}</span>
                    个文件
                  </p>
                </div>
                <div class="inner-inter-upload-list">
                  <el-scrollbar max-height="300px">
                    <li v-for="(item, index) in interImages" :key="item.uid">
                      <el-checkbox v-model="item.checked" style="margin-right: 10px" :disabled="item.status === 0" @change="handleCheckInter(item)"></el-checkbox>
                      <div class="image-box">
                        <img :src="item.url" alt="" />
                      </div>
                      <p class="url" :class="{ 'url-warning': item.status === 0 }">{{ item.url }}</p>
                      <el-icon v-if="item.status === 1" class="success">
                        <CircleCheckFilled />
                      </el-icon>
                      <el-tooltip v-if="item.status === 0" effect="light" content="未获取到网络图片" placement="bottom">
                        <el-icon class="warning">
                          <WarningFilled />
                        </el-icon>
                      </el-tooltip>
                      <a href="javascript:;" class="delete-btn" @click="handleDeleteInter(index)">
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </a>
                    </li>
                  </el-scrollbar>
                </div>
              </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="submitInsertInterImage()">确认</el-button>
                <el-button @click="interShow = false">取消</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="insertImage" :loading="loadingFiles.length > 0">确认</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch, computed, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { checkImages } from '@/api/content'
import { Delete, Check, CircleCheckFilled, WarningFilled } from '@element-plus/icons-vue'
import { singleUpload, fileMd5 } from '@/utils/upload'
import { getToken } from '@/utils/storage'
import { getImageSize } from '@/utils/tools'
import { getEasyImage } from '@/api/file'
import { useStore } from 'vuex'
import draggable from 'vuedraggable'

const token = getToken()
const props = defineProps({
  //打开dialog
  showDialog: {
    type: Boolean,
    default: false
  },
  limit: {
    type: Number,
    default: 1
  },
  allow: {
    type: String
    // default: 'image/png, image/jpeg'
  },
  sizeLimit: {
    type: [String, Number]
  },
  isAppendToBody: {
    type: Boolean,
    default: false
  },
  isToJpg: {
    type: Boolean,
    default: false
  }
})

const store = useStore()
const limit = computed(() => props.limit)
const sizeLimit = computed(() => Number(props.sizeLimit || 10 * 1048576))

const singleActionUrl = ref(store.state.content.singleActionUrl)
const maxWidth = computed(() => {
  // let currentSite = store.state.site.currentSite
  // return currentSite.setting.maxWidth ? currentSite.setting.maxWidth : 2000
  return 2000
})
const showDialog = ref(props.showDialog)

watch(
  props,
  newVal => {
    showDialog.value = newVal.showDialog
  },
  { deep: true }
)
const emit = defineEmits(['update:showDialog', 'getImage'])
const handleClose = () => {
  uploadRef.value.clearFiles()
  emit('update:showDialog', false)
}
const closeDialog = () => {
  emit('update:showDialog', false)
}
// 图片上传
const choseImagesList = ref([])
const imgUploadList = ref([])
const uploadRef = ref()
const materialShow = ref(false)
const materialImages = ref([])
const defaultMaterialQuery = {
  currentPage: 1,
  pageSize: 10,
  type: 0,
  path: 'public',
  total: 0
}
const materialQuery = reactive(Object.assign({}, defaultMaterialQuery))
const handleMaterial = () => {
  materialShow.value = true
  handleGetEasyImage()
}
const handleGetEasyImage = () => {
  getEasyImage(materialQuery).then(res => {
    materialImages.value = res.data.list
    materialQuery.total = res.data.total
  })
}
const handleMaterialCurrentChange = page => {
  materialQuery.currentPage = page
  handleGetEasyImage()
}
// 添加网络文件
const interUrls = ref('')
const handleClearInter = () => {
  interUrls.value = ''
}
// 链接生成图片列表
const handleAddInterImg = () => {
  checkImages({ urls: interUrls.value }).then(res => {
    let _images = res.data.map((item, index) => {
      let _item = {
        url: item.url,
        uid: Date.now() + index,
        percentage: 100,
        status: item.status
      }
      return _item
    })
    interImages.value = interImages.value.concat(_images)
    // 更新勾选
    let num = 0
    interImages.value = interImages.value.map(item => {
      if (num < limit.value - imgUploadList.value.length && item.status === 1) {
        item.checked = true
        num++
      } else {
        item.checked = false
      }
      return item
    })
    handleClearInter()
  })
}
const interImages = ref([])
const interImagesChecked = computed(() => {
  return interImages.value.filter(item => {
    return item.checked
  })
})
const handleCheckInter = data => {
  if (data.checked && interImagesChecked.value.length > limit.value - imgUploadList.value.length) {
    data.checked = !data.checked
    ElMessage({
      showClose: true,
      message: '当前只允许添加' + (limit.value - imgUploadList.value.length) + '张网络图片',
      type: 'warning'
    })
  }
}
const interShow = ref(false)
const handleInt = () => {
  interShow.value = true
}
const handleDeleteInter = index => {
  interImages.value.splice(index, 1)
}

const submitInsertInterImage = () => {
  imgUploadList.value = imgUploadList.value.concat(interImagesChecked.value)
  interShow.value = false
}

const handleInterClose = () => {
  interImages.value = []
}
// 上传列表
const loadingFiles = reactive([])
const handleBeforeUpload = async file => {
  //限制文件上传大小
  const limitPass = file.size < sizeLimit.value
  if (!limitPass) {
    ElMessage({
      showClose: true,
      message: `文件大小不能超过 ${getSizeText(sizeLimit.value)} !，当前 ${getSizeText(file.size)} `,
      type: 'warning'
    })
    return false
  }
  loadingFiles.push(file.uid)
  // md5校验，未上传返回false，已上传过则返回完整信息
  let res = await fileMd5(file)
  if (res.data === false) {
    return true
  } else {
    handleUploadSuccess(file, res.data.url)
    return false
  }
}
const getSizeText = size => {
  if (size > 0 && size / 1024 / 1024 < 1) {
    return (size / 1024).toFixed(2) + 'Kb'
  } else if (size / 1024 / 1024 >= 1) {
    return (size / 1024 / 1024).toFixed(2) + 'MB'
  } else {
    return size + 'b'
  }
}
const handleExceed = () => {
  ElMessage({
    showClose: true,
    message: '当前只允许上传' + limit.value + '张图片',
    type: 'warning'
  })
}
// 资源库切换
const changeLibrary = e => {
  if (e.target.classList.contains('btn')) {
    const path = e.target.getAttribute('path')
    Object.assign(materialQuery, defaultMaterialQuery)
    materialQuery.path = path
    handleGetEasyImage()
  }
}
// 资源库图片添加
const addMaterialImg = () => {
  imgUploadList.value = imgUploadList.value.concat(choseImagesList.value)
  materialShow.value = false
}
// 关闭资源库弹框触发
const handleMaterialClose = () => {
  choseImagesList.value = []
}

const handleChangeFiles = file => {
  let URL = null
  if (window.createObjectURL != undefined) {
    // basic
    URL = window.createObjectURL(file.raw)
  } else if (window.URL != undefined) {
    // mozilla(firefox)
    URL = window.URL.createObjectURL(file.raw)
  } else if (window.webkitURL != undefined) {
    // webkit or chrome
    URL = window.webkitURL.createObjectURL(file.raw)
  }
  file.url = URL
}
const handleUpload = async option => {
  // 不切片
  let data = new FormData()
  data.append('file', option.file)
  // 获取图片文件的宽高属性
  const { width, height, scale } = await getImageSize(option.file, maxWidth.value)
  data.append('cropWidth', width)
  data.append('cropHeight', height)
  data.append('scaledWidth', width)
  data.append('scaledHeight', height)
  data.append('startX', 0)
  data.append('startY', 0)
  data.append('path', 'content')
  data.append('type', 0)
  if (scale < 1) {
    data.append('canMini', true)
  }
  let res = await singleUpload(data, singleActionUrl.value, option.onProgress)
  handleUploadSuccess(option.file, res.data.url)
}
const handleUploadSuccess = (file, url) => {
  // console.log("上传成功前",imgUploadList.value);
  imgUploadList.value.push({
    uid: file.uid,
    percentage: 100,
    url: url,
    name: file.name,
    status: 'success'
  })
  const newData = imgUploadList.value.filter(item => item.raw);
  // imgUploadList.value = newData
  console.log("上传成功后newData",newData);
  // console.log("上传成功后",imgUploadList.value);

  loadingFiles.splice(loadingFiles.indexOf(file.uid), 1)
}
const removeUpload = id => {
  imgUploadList.value = imgUploadList.value.filter(item => item.uid !== id)
}
const removeChose = index => {
  choseImagesList.value.splice(index, 1)
}
const toggleChooseOnline = item => {
  const index = choseImagesList.value.findIndex(a => a.id === item.id)
  if (index !== -1) {
    choseImagesList.value.splice(index, 1)
  } else {
    if (choseImagesList.value.length < limit.value - imgUploadList.value.length) {
      item.percentage = 100
      item.uid = item.id
      choseImagesList.value.push(item)
    } else {
      ElMessage.warning('当前只允许添加' + (limit.value - imgUploadList.value.length) + '张图片')
      return
    }
  }
}

const insertImage = () => {
  let _imgList = imgUploadList.value.map(item => {
    let _item = {
      id: item.id,
      url: item.url,
      oriUrl: item.oriUrl ? item.oriUrl : item.url,
      name: item.oriName
    }
    if (item.uid) {
      _item.id = item.uid
    }
    if (item.raw) {
      _item.id = item.raw.uid
      _item.url = item.raw.url
      _item.name = item.raw.name
    }
    return _item
  })
  uploadRef.value.clearFiles()
  emit('getImage', _imgList)
  choseImagesList.value = []
  emit('update:showDialog', false)
}
const uploadClick = () => {
  let dom = document.querySelector('.is-drag')
  dom.click()
}
const getImgSize = url => {
  return new Promise(resolve => {
    let img = new Image()
    img.src = url
    img.onload = function () {
      resolve({ width: img.width, height: img.height })
    }
  })
}
// 跳转在线编辑
const onlineImageEdit = async val => {
  let res = await getImgSize(val.url)
  // window.open(`http://localhost:3000/#/?token=${token}&uuid=${uuid}&fromType=2&imgUrl=${val.url}&width=${res.width}&height=${res.height}&imgId=${val.uid}&timestamp=${new Date().getTime()}&method=messageImgUpload`,'_blank')
  window.open(
    `http://banner.foxtest.net/#/?token=${token}&fromType=2&imgUrl=${val.url}&width=${res.width}&height=${res.height}&imgId=${val.uid}&timestamp=${new Date().getTime()}&method=messageImgUpload`,
    '_blank'
  )
}
function base64ToBlob(base64, type) {
  const binStr = atob(base64.split(',')[1])
  const len = binStr.length
  const arr = new Uint8Array(len)
  for (let i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i)
  }
  return new Blob([arr], { type })
}
// 接受图文编辑器传来的图片并替换
function messageImgUpload(event) {
  if (event.data?.urlList?.length) {
    let base64 = event.data.urlList[0].url
    let imgId = event.data.urlList[0].imgId
    const blob = base64ToBlob(base64, 'image/png')
    let data = new FormData()
    data.append('file', blob)
    data.append('name', `${new Date().getTime()}.png`)
    data.append('size', blob.size)
    singleUpload(data, singleActionUrl.value).then(res => {
      let imgObj = imgUploadList.value.find(item => item.id == imgId)
      imgObj.url = res.data.url
    })
  }
}
window.addEventListener('message', function (event) {
  if (event.data.method === 'messageImgUpload') {
    messageImgUpload(event)
  }
})
</script>

<style scoped lang="scss">
::v-deep(.axupimg-box .el-dialog__body) {
  padding: 0;
}

::v-deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)) {
  padding-left: 20px;
}

.axupimg-box {
  .inner-axupimg-box {
    display: flex;
    height: 480px;

    .axupimg-upload-box {
      height: 100%;
      width: 100%;

      .local-upload {
        padding: 20px;

        .local-upload-list-out {
          height: 400px;

          .no-upload-list {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
              color: $mainColor;
            }

            p {
              color: #aaaaaa;
              font-size: 14px;
            }
          }
        }

        .local-upload-list {
          height: 400px;
          display: flex;
          flex-wrap: wrap;
          position: relative;
          align-content: flex-start;

          & > div {
            height: 160px;
            width: 160px;
            margin-right: 20px;
            margin-top: 20px;
            background-color: #f8f8f8;
          }

          .img-name {
            font-size: 12px;
            @include textEllipsis(24px, 1);
            color: #000;
            text-align: center;
          }

          & > div:nth-child(5n + 1) {
            margin-left: 18px;
          }

          li {
            transition: all 0.3s;
            height: 160px;
            width: 160px;
            box-sizing: border-box;
            list-style: none;
            border: 1px solid #e4e4e4;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;

            .img-box {
              height: 158px;
              width: 158px;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                max-width: 158px;
                max-height: 158px;
              }
            }

            .progress-box {
              width: 100%;
              position: absolute;
              bottom: 0;

              ::v-deep(.el-progress-bar__outer) {
                border-radius: 0;
              }

              ::v-deep(.el-progress-bar__inner) {
                border-radius: 0;
              }
            }

            .remove-upload,
            .online-image-edit {
              color: $white;
              position: absolute;
              right: 5px;
              top: 5px;
              cursor: pointer;
              display: none;
              height: 24px;
              width: 24px;
              background-color: #ff5240;
              box-sizing: border-box;
              border: 1px solid rgba(255, 255, 255, 0.5);
              align-items: center;
              justify-content: center;

              i {
                font-size: 16px;
              }
            }

            &:hover {
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
              border-color: $mainColor;
              background-color: $focusContent;

              .remove-upload,
              .online-image-edit {
                display: flex;
              }
            }

            .online-image-edit {
              right: 40px;
              background: #fff;

              i {
                font-size: 24px;
                color: $mainColor;
              }
            }
          }
        }
      }

      .online-upload {
        padding: 20px;

        .material-choose-box {
          display: flex;
          margin-bottom: 10px;

          .btn {
            padding: 0 15px;
            line-height: 32px;
            height: 32px;
            border-radius: 100px;
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid #c4c9d5;
          }

          .btn.is-active {
            background-color: $mainColor;
            border-color: $mainColor;
            color: $white;
          }
        }

        .online-upload-list-outer {
          height: 425px;
          width: 100%;
          border: 1px solid $borderColor;
        }

        .online-upload-list {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          height: 375px;

          .online-upload-item {
            border: 1px solid #e4e4e4;
            width: calc((100% - 100px) / 5);
            height: calc((100% - 40px) / 2);
            background-color: $backBase;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 10px 0;
            cursor: pointer;
            box-sizing: border-box;
            transition: all 0.3s;
            position: relative;

            .upload-item-checkbox {
              position: absolute;
              height: 24px;
              width: 24px;
              box-sizing: border-box;
              border: 1px solid #dcdfe6;
              top: 5px;
              left: 5px;
              background-color: $white;
              display: none;
              transition: all 0.2s;
              align-items: center;
              justify-content: center;

              i {
                font-weight: bold;
                font-size: 18px;
                color: $white;
              }
            }

            img {
              max-width: 100%;
              max-height: 100%;
            }

            &.is-choose {
              .upload-item-checkbox {
                display: flex;
                background-color: #2cbf77;
                border-color: #2cbf77;
              }
            }

            &:hover {
              background-color: $focusContent;
              border-color: $hoverColor;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

              .upload-item-checkbox {
                display: flex;
              }
            }
          }
        }

        .pagination-view {
          padding-right: 20px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }

        .chose-img {
          margin-top: 25px;

          .chose-img-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;

            p {
              span {
                color: #2cbf77;
              }
            }
          }

          .material-chose-list {
            height: 120px;
            background-color: $focusContent;
            padding: 0 40px;

            .inner-material-chose-list {
              display: flex;
              align-items: center;
              height: 120px;
              width: 100%;

              .material-chose-list-item {
                transition: all 0.2s;
                height: 96px;
                width: 96px;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: $backBase;
                border: 1px solid #e4e4e4;
                flex-shrink: 0;
                margin-right: 10px;

                img {
                  max-height: 100%;
                  max-width: 100%;
                }

                .remove-btn {
                  color: $white;
                  position: absolute;
                  right: 5px;
                  top: 5px;
                  cursor: pointer;
                  display: none;
                  height: 24px;
                  width: 24px;
                  background-color: #ff5240;
                  box-sizing: border-box;
                  border: 1px solid rgba(255, 255, 255, 0.5);
                  align-items: center;
                  justify-content: center;

                  i {
                    font-size: 16px;
                  }
                }

                &:hover {
                  background-color: $focusContent;
                  border-color: $hoverColor;
                  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

                  .remove-btn {
                    display: flex;
                  }
                }

                &:nth-last-child(1) {
                  margin-right: 0;
                }
              }
            }
          }
        }
      }

      .inter-upload {
        padding: 20px;

        p.inter-upload-tips {
          margin-bottom: 20px;
          font-size: 14px;
          color: #333333;
        }

        .inter-upload-list {
          .inter-upload-list-title {
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #333333;

            .title-left {
              font-size: 16px;
            }

            .title-right {
              font-size: 14px;

              span.primary-num {
                color: $mainColor;
              }
            }
          }

          .inner-inter-upload-list {
            border: 1px solid #e4e4e4;

            li {
              height: 60px;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              padding: 0 20px 0 10px;

              & + li {
                border-top: 1px solid #e4e4e4;
              }

              .image-box {
                height: 40px;
                width: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f2f2f2;
                margin-right: 10px;

                img {
                  max-width: 100%;
                  max-height: 100%;
                }
              }

              p.url {
                flex: 1;
                font-size: 14px;
                @include textEllipsis(18px, 1);
              }

              p.url-warning {
                color: $warningColor;
              }

              .success,
              .warning {
                font-size: 18px;
                margin-right: 10px;
              }

              .success {
                color: $successColor;
              }

              .warning {
                color: $warningColor;
              }

              .delete-btn {
                display: flex;
                height: 24px;
                width: 24px;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                border-radius: 2px;
                background-color: rgba(#333, 0.5);

                &:hover {
                  background-color: $failColor;
                }
              }
            }
          }
        }
      }
    }
  }
}

.list-move,
/* 对移动中的元素应用的过渡 */
.list-enter-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  transition: opacity 0.5s ease;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
}

::v-deep(.el-upload-dragger) {
  padding-top: 0;
  padding-bottom: 0;
}
</style>
